<template>
	<NavBar :obj="{ title: '选择商品', color: '#000', backgroundColor: '#fff' }" />

	<view class="fill">
		<view class="type">
			<view class="big-title">选择退款类型</view>
			<view class="list flex items-center justify-between">
				<view :class="{ active: type == item.type }" class="item flex items-center justify-between" v-for="(item, index) in typeList" :key="index" @click="chageType(item)">
					<image :src="'/static/refund/ic_type' + item.type + (type == item.type ? '-a' : '') + '.png'" class="icon"></image>
					<view class="lable flex-1">
						<view class="title">{{ item.title }}</view>
						<view class="desc">{{ item.desc }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="product">
			<view class="big-title">选择退款/退货商品</view>

			<view class="item flex items-center" v-for="(item, index) in list" :key="index" v-if="list.length > 0">
				<image :src="changeIcon[item.change]" class="checkbox-icon" @click="change(index)"></image>
				<view class="info flex flex-1">
					<image :src="item.icon" class="icon"></image>
					<view class="tls flex flex-col justify-between flex-1">
						<view class="fast">
							<view class="title line-1-clamp">{{ item.title }}</view>
							<view class="spec" v-show="item.spec">
								<text>{{ item.spec }}</text>
							</view>
							
						</view>
						<view class="last flex items-center justify-between">
							<view class="price rmb">{{ item.vip_price }}</view>
							<view class="num">x{{ item.num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="fixed-bottom">
		<view class="btn" @click="cooperationSave">
			<text>确认</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { port, goUrl, hint } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import Upload from '/components/Uploads.vue';
	import { goBack } from '../../service/port';
	const list = ref([]);
	const title = ref('');
	const type = ref(1);
	const listRef = ref({
		id: '',
		page: 1
	});

	const changeIcon = ['/static/cart/ic_gwcweix@2x.png', '/static/cart/ic_gwcyixz@2x.png'];
	const checkedIds = ref([]);

	const typeList = ref([
		{ title: '仅退款', desc: '没收到货，或协商不退货只退款', type: 1 },
		{ title: '退款退货', desc: '已收到货，需要退还收到的货物', type: 2 }
	]);

	const status = ref();

	onLoad((e) => {
		if (e.id) {
			listRef.value.id = e.id;
		}
		if (e.status) {
			status.value = e.status;
			if (status.value == 2) {
				typeList.value.splice(1, 1);
			}
		}
	});

	onShow(() => {
		listRef.value.page = 1;
		list.value.length = 0;
		checkedIds.value.length = 0;
		getRefundProduct();
	});

	function chageType(item) {
		type.value = item.type;
	}

	function cooperationSave() {
		if (!checkedIds.value.length) {
			hint('请选择商品');
			return false;
		}

		goUrl('/pages/refund/apply?op_ids=' + checkedIds.value.join(',') + '&type=' + type.value + '&id=' + listRef.value.id);
	}

	function change(index) {
		if (list.value[index].change == 1) {
			checkedIds.value.splice(checkedIds.value.indexOf(list.value[index].id), 1);
		} else {
			checkedIds.value.push(list.value[index].id);
		}
		list.value[index].change = list.value[index].change == 1 ? 0 : 1;
	}

	async function getRefundProduct() {
		let res = await port('getRefundProduct', listRef.value);
		if (res.data.length) {
			res.data.forEach((i) => {
				i.change = 0;
			});

			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 44rpx;
	}
	.gray {
		color: #bdbdbd !important;
	}
	.theme-color {
		color: #fb3204 !important;
	}

	.describe {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 0 30rpx;
	}

	.big-title {
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		margin-bottom: 25rpx;
	}
	.type {
		margin: 30rpx;
		padding: 24rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.list {
			gap: 22rpx;
			.item {
				padding: 24rpx;
				background: #f4f5f8;
				border-radius: 20rpx;
				.icon {
					width: 56rpx;
					height: 56rpx;
				}
				.lable {
					margin-left: 26rpx;
					.title {
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						margin-bottom: 10rpx;
					}
					.desc {
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.active {
				background: #ffe3dd;
				padding: 22rpx;
				border: 1px solid #fb3204;
				.lable {
					.title {
						color: #fb3204;
					}
				}
			}
		}
	}

	.fill {
		padding-bottom: 220rpx;

		.product {
			margin: 24rpx;
			border-radius: 30rpx;
			background: #ffffff;
			padding: 24rpx;
			.big-title {
				margin-bottom: 35rpx;
			}
			.item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;
				&:last-child {
					padding-bottom: none;
					border-bottom: none;
				}
				.checkbox-icon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}

				.info {
					.icon {
						width: 154rpx;
						height: 154rpx;
						border-radius: 10rpx;
					}
					.tls {
						margin-left: 22rpx;
						.fast {
							.title {
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
							}
							.spec {
								font-weight: 400;
								font-size: 22rpx;
								border-radius: 6rpx;
								margin-top: 15rpx;
								> text {
									color: #888888;
									background: #f6f6f6;
									padding: 5rpx 13rpx;
								}
							}
						}
						.last {
							.price {
								font-weight: 500;
								font-size: 36rpx;
								color: #fb3204;
							}
							.rmb:before {
								font-size: 24rpx;
							}
							.num{
								font-weight: 400;
								font-size: 24upx;
								color: #333333;
								margin-top: 10upx;
								margin-left: 15px;
							}
						}
					}
				}
			}
		}
	}
</style>
